<template>
	<el-dialog title="新增新闻类型" :visible.sync="dialogVisible" width="40%">
		<el-form ref="form" :rules="rules" :model="form" label-width="130px" >
			<el-form-item label="新闻类型名称" prop="name">
				<el-input placeholder="" v-model="form.name"></el-input>
			</el-form-item>
      <el-form-item label="是否在前台显示" prop="state">
        <el-col :span="16">
          <el-radio v-model="form.state" :label="1">显示类型</el-radio>
          <el-radio v-model="form.state" :label="0">隐藏类型</el-radio></el-col>
      </el-form-item>
			


		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="save('form')">保存</el-button>
		</span>
	</el-dialog>
</template>

<script>
	export default {
		name: "Add",
		data() {
			return {
				dialogVisible: false,
				menuList: [],
				form: {
          id:'',
          name: '',
          state:''
				},
				flag:true,
        rules: {
          name: [{
            required: true,
            message: '请输入新增的新闻类型！',
            trigger: 'blur'
          },
            {
              min: 1,
              max: 15,
              message: '长度在 1 到 15 个字符',
              trigger: 'blur'
            }
          ],
          state: [{
            required: true,
            message: '请选择新闻类型是否在前台显示！',
            trigger: 'blur'
          }
          ]
				},
			}
		},
		methods: {
			
			save(reffrom) {
        //数据向后端发送进行验证
        //$refs是一个引用

        this.$refs[reffrom].validate((valid) => {
          if (valid) {
            //如果发送成功，跳转到其他组件
            //【跳转语句】
            this.$http.post("admin/NewsTypeCtl/saveNewsType", this.form).then((resp) => {
              if (resp.data.code == 200) {
                this.$message({
                  showClose: true,
                  message: '恭喜你，修改成功✔',
                  type: 'success'
                });
                this.$router.go();
              }
            })
          }
        });

			}
		},
		mounted() {
			this.$http.get("admin/RoleCtl/findMenus").then((res) => {
				if (res.data.code == 200) {
					this.menuList = res.data.data;
				}
			})
		}
	}
</script>